<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title>实验7：使用jQuery制作游戏角色</title>
</head>
<style>
    .bkg{
        margin:0 auto;
        width: 100%;
        height:700px;
        background-color: black;
    }
    .role{
        position: absolute;
    }
</style>
<body>
    <div class="bkg">
        <img class="role" src="../images/test7/playerbig_left.gif">
    </div>
    <!--189000526 谭静-->
    <script>
        $(function(){
            window.document.oncontextmenu = ()=>false;//阻止鼠标右键默认事件
             //设置人物原始坐标
            $(".role").css({
                        marginTop: '50px',
                        marginLeft: '50px'
                    });
                
            $(window).mousedown(function(e){
                if(e.which == 1){//单击鼠标左键
                    //获取鼠标左键单击位置的坐标
                  //  alert("X 坐标: " + e.clientX + ", Y 坐标: " +  e.clientY);
                    //判断点击的位置和人物位置的关系
                    
                    if($(".role").is(":animated")){//判断元素是否处于动画状态，避免动画覆盖
                        return false;
                    }else{
                        if($(".role").offset().left <= e.clientX){//向右移动
                            var x = e.clientX - $(".role").offset().left;//获取两者横坐标的差值
                            var y = e.clientY - $(".role").offset().top;//获取两者纵坐标的差值
                            //改变人物方向

                            $('.role').attr('src','../images/test7/playerbig_right.gif');
                            $(".role").animate({
                                left:'+=' + x + 'px',
                                top: '+=' + y + 'px'
                            },
                            1000);
                        }else{
                            var x = $(".role").offset().left - e.clientX;//获取两者横坐标的差值
                            var y = $(".role").offset().top - e.clientY;//获取两者纵坐标的差值
                            $('.role').attr('src','../images/test7/playerbig_left.gif');
                            $(".role").animate({
                                left:'-=' + x + 'px',
                                top: '-=' + y + 'px'
                            },
                            1000);
                        }
                }
            }
                if(e.which == 3){//单击鼠标右键改变角色
                    $(".role").attr('src', "../images/test7/pet.gif");
                }
            })
            


        });
    
    </script>
</body>
</html>